<template>
	<view class="con">
		<!-- 订单物流 -->
		<view class="t-box" v-if="dataInfo!=null">
			<view class="ttbox" v-if="dataInfo.orderList.deliveryStatus==20">
				<view class="tt-box">
					<view style="display: flex;align-items: center;">
						<u-icon name="car" color="#999" size="28"></u-icon>
						<view class="title" style="color:#F0812D ;">{{wulius.context}}</view >
					</view>
				</view>
				<view class="ml">
					{{wulius.ftime}}
				</view>
			</view>
			<view class="ttbox">
				<view class="tt-box">
					<view>
						<u-icon name="map" color="#999" size="28"></u-icon>
						<text class="title">{{address.name}} {{address.phone}}</text>
					</view>
				</view>
				<view class="ml">
					地址：{{address.provinceName}}{{address.cityName}}{{address.regionName}}{{address.detail}}
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="t-box" v-if="dataInfo!=null">
			<view class="item" v-for="item in dataInfo.orderGoodsInfo" @click="goProduct(item.goodsId)">
				<image :src="item.imageUrl" mode="aspectFill" class="gimg"></image>
				<view class="it">
					<view class="gt">{{item.goodsName}}</view>
					<view class="getitle">{{item.goodsAttr}}</view>
					<view class="price" v-if="dataInfo.orderList.isVip==2">{{item.goodsPrice}}积分</view>
					<view class="price" v-if="dataInfo.orderList.isVip==1">￥{{item.goodsPrice}}</view>
				</view>
			</view>
		</view>
		<!-- 订单编号信息 -->
		<view class="t-box" v-if="dataInfo!=null">
			<view class="bitem">
				<text class="bl">订单编号:</text>
				<text class="br">{{dataInfo.orderList.orderNo}}</text>
			</view>
			<view class="bitem">
				<text class="bl">下单时间:</text>
				<text class="br">{{$u.timeFormat(dataInfo.orderList.createTime, 'yyyy-mm-dd hh:MM:ss')}}</text>
			</view>
			<view class="bitem">
				<text class="bl">支付方式:</text>
				<text class="br">{{dataInfo.orderList.payType | paytype}}</text>
			</view>
			<view class="bitem">
				<text class="bl">支付时间:</text>
				<text class="br">{{$u.timeFormat(dataInfo.orderList.payTime, 'yyyy-mm-dd hh:MM:ss')}}</text>
			</view>
			<view class="bitem" v-if="dataInfo.orderList.deliveryType!=null">
				<text class="bl">配送方式:</text>
				<text class="br">{{dataInfo.orderList.deliveryType | pstype}}</text>
			</view>
			<view class="bitem" v-if="dataInfo.orderList.expressNo!=''">
				<text class="bl" >快递单号:</text>
				<text class="br">{{dataInfo.orderList.expressNo}}</text>
			</view>
			<view class="bitems">
				<text class="bl">商品总额:</text>
				<text class="brs" v-if="dataInfo.orderList.isVip==2&&type==1">{{dataInfo.orderList.totalPrice}}积分</text>
				<text class="brs" v-if="dataInfo.orderList.isVip==1&&type==1">￥{{dataInfo.orderList.totalPrice}}</text>
				<text class="brs" v-if="dataInfo.orderList.payType>10&&type==0">￥{{dataInfo.orderList.totalPrice}}</text>
				<text class="brs" v-if="dataInfo.orderList.payType==10&&type==0">{{dataInfo.orderList.totalPrice}}余额</text>
			</view>
			<view class="bitems">
				<text class="bl">运费:</text>
				<text class="brs">￥0.00</text>
			</view>
			<view class="pbox">
				<text style="font-size: 30rpx; font-weight: bold;">实付款：</text>
				<text style="color:#F0812D ;font-size: 30rpx; font-weight: bold;" v-if="dataInfo.orderList.isVip==3&&type==1">{{dataInfo.orderList.orderPrice}}余额</text>
				<text style="color:#F0812D ;font-size: 30rpx; font-weight: bold;" v-if="dataInfo.orderList.isVip==2&&type==1">{{dataInfo.orderList.orderPrice}}积分</text>
				<text style="color:#F0812D ;font-size: 30rpx; font-weight: bold;" v-if="dataInfo.orderList.isVip==1&&type==1">￥{{dataInfo.orderList.orderPrice}}</text>
			
				<text style="color:#F0812D ;font-size: 30rpx; font-weight: bold;" v-if="dataInfo.orderList.payType==10&&type==0">{{dataInfo.orderList.orderPrice}}积分</text>
				<text style="color:#F0812D ;font-size: 30rpx; font-weight: bold;" v-if="dataInfo.orderList.payType>10&&type==0">￥{{dataInfo.orderList.orderPrice}}</text>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="btnbox" v-if="dataInfo!=null">
			<!-- <view class="btn">申请退款</view> -->
			<view class="btn" v-if="dataInfo.orderList.expressNo!=''" @click="wuliu(dataInfo.orderList.expressNo,dataInfo.orderList.expressId)">查看物流</view>
			<view class="btn" v-if="dataInfo.orderList.payStatus==10&&type==1" @click="pay(dataInfo.orderList.orderNo,dataInfo.orderList.totalPrice)">立即支付</view>
			<view class="btn" v-if="dataInfo.orderList.payStatus==20&&dataInfo.orderList.receiptStatus==10&&dataInfo.orderList.deliveryStatus==20" @click="shouhuo(dataInfo.orderList.orderId)">确认收货</view>
			<view class="btn" v-if="dataInfo.orderList.isComment==0&&dataInfo.orderList.receiptStatus==20&&type==1" @click="pinjia(dataInfo.orderList)">立即评价</view>
		</view>
	</view>
</template>
<script>
	import {dindancon,ptorderInfo,ptwuliu,ptsh} from"../../api/product.js"
	import {orderList,confirmReceipt}from"../../api/product.js"
	import {wuliu} from"../../api/product.js"
	export default{
		data(){
			// 2是积分 1 是余额
			return{
				orderCode:'',
				dataInfo:null,
				address:{},
				wulius:{},
				type:1 ,//0拼团 1正常
				id:""
			}
		},
		filters:{
			paytype(val){
				if(val==10){
					return "余额支付"
				}
				if(val==20){
					return "微信支付"
				}
				if(val==30){
					return "支付宝"
				}
				if(val==40){
					return "积分"
				}
			},
			pstype(val){
				if(val==10){
					return "快递配送"
				}
				if(val==20){
					return "上门自提"
				}
			}
		},
		onLoad(e) {
			if(e.type){
				this.type=e.type
			}
			this.orderCode=e.code
			this.getInfo(e.code)
			// this.getOrder()
		},
		methods:{
			//商品点击
			goProduct(id){
				console.log(111)
				uni.navigateTo({
					url:'/pages/product/detail?id='+id
				})
			},
			async getOrder(){
				let res=await this.get(wuliu,{expressNum:this.dataInfo.orderList.expressNo,expressId:this.dataInfo.orderList.expressId})
			},
			async getInfo(id){
				this.id=id
				let url=dindancon
				let wUrl=wuliu
				if(this.type==0){
					console.log(this.type)
					url=ptorderInfo
					wUrl=ptwuliu
				}
				let res=await this.get(url,{orderCode:this.id})
				this.dataInfo=res.data
				this.address=res.data.orderAddressInfo
				
				let r=await this.get(wUrl,{expressNum:this.dataInfo.orderList.expressNo,expressId:this.dataInfo.orderList.expressId})
				this.wulius=JSON.parse(r.data).data[0]
				console.log(this.wulius)
				console.log(res)
			},
			wuliu(order,id){
				uni.navigateTo({
					url:"/pages/details/wuliudetails?id="+id+"&order="+order
				})
			},
			pay(order,price){
				uni.navigateTo({
					url:"/pages/product/payorder?order="+order+"&price="+price
				})
			},
			shouhuo(id){
				let url=confirmReceipt
				if(this.type==0){
					url=ptsh
				}
				console.log(id)
				this.get(url,{orderId:id}).then(res=>{
					console.log(res)
					this.num=0
					this.list=[]
					this.getInfo(this.id)
				})
			},
			pinjia(item){
				uni.navigateTo({
					url:"/pages/details/comment?data="+JSON.stringify(item)
				})
			}
		}
		
	}

</script>
<style>
	.btn{
		width: 152rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		border-radius: 50rpx;
		border: 1px #999 solid;
	}
	.btnbox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		opacity: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.con{
		padding-bottom: 200rpx;
	}
	.pbox{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 10rpx 30rpx;
	}
	.bitems{
		margin-top: 40rpx;
		padding: 10rpx 30rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
	}
	.bl{
		width: 140rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #999999;
		opacity: 1;
		margin-right: 60rpx;

	}
	.br{
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;

	}
	.bitem{
		padding: 10rpx 30rpx;
		
	}
	.price {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		margin-top: 20rpx;

	}
	.getitle{
		width: 446rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #666666;
	}
	.gt {
		width: 446rpx;
		height: 66rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #666666;
		opacity: 1;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */


	}

	.it {
		width: 446rpx;
		margin-left: 40rpx;
	}

	.gimg {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.item {
		display: flex;
		margin: 20rpx 0;
	}

	.ml {
		padding-left: 50rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 30rpx;
		color: #666666;
		opacity: 1;

	}

	.title {
		margin-left: 20rpx;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		width: 600rpx;
	}

	.tt-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.t-box {
		width: 690rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 6rpx;
		margin: 30rpx auto 0;
		background-color: #FFFFFF;
		padding: 30rpx 20rpx;
	}

	.ttbox {
		margin-bottom: 10rpx;
	}

	page {
		background: #F6F6F6;
	}
</style>
